<template>
    <el-dialog
            v-bind="$attrs"
            v-on="$listeners"
            append-to-body
            :close-on-click-modal="false"
            :before-close="handleClose"
            :top="top"
            :width="width"
            :class="{'elformBox':!noPadding}">
        <div class="scroll-div" :style="{height:height}" v-if="autoScroll">
          <slot></slot>
        </div>
        <template v-else>
          <slot></slot>
        </template>
        <span slot="footer" class="dialog-footer" v-if="!noButton">
            <slot name="footer">
            <template v-if="disabled">
                <el-button @click="handleClose">关 闭</el-button>
            </template>
            <template v-else>
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="onSubmit">{{enterText}}</el-button>
            </template>
             <slot name="other-btn">
             </slot>
             </slot>
        </span>
    </el-dialog>
</template>

<script>
    import ScrollPanel from './ScrollPanel'
    export default {
        name: "BaseDialog",
      components: { ScrollPanel },
      props: {
            enterText:{
                type:String,
                default:"确 定"
            },
            size:{
              type:String,
              default:"none"
            },
            disabled:{
              type:Boolean,
              default:false
            },
            noButton:{
              type:Boolean,
              default:false
            },
            autoScroll:{
              type:Boolean,
              default:true
            },
            noPadding:{
              type:Boolean,
              default:false
            }
        },
      create(){
      },
      mounted() {
        const that = this;
        window.onresize = () => (() => {
          that.clientWidth = document.body.clientWidth;
        })();
      },
      computed:{
          top(){
            if(this.size=="mini" || this.size=="tiny"){
              return "15vh"
            }else if(this.size=="small"||this.size=="tinylong"){
              return "10vh"
            }else if(this.size=="medium"){
              return "5vh"
            }else if(this.size=="medium"){
              return "5vh"
            }else if(this.size=="big"){
              return "5vh"
            }else if(this.size=="large"){
              return "5vh"
            }else if(this.size=='huge'){
              return "15px"
            }
          },
          width(){
            if(this.size=="medium"|| this.size=="small"){
              return this.clientWidth<1000?"100%":"1000px"
            }else if(this.size=="mini"){
              return this.clientWidth < 800 ?"100%":"800px"
            }else if(this.size=="tiny"|| this.size=="tinylong"){
              return this.clientWidth < 600 ?"100%":"600px"
            }else if(this.size=="big"){
              return this.clientWidth < 1200 ?"100%":"1200px"
            }else if(this.size=="large"){
              return this.clientWidth < 1400 ?"100%":"85%"
            }else if(this.size=='huge'){
              return this.clientWidth < 1600 ?"100%":"95%"
            }
          },
          height(){
            if(this.size=="medium"){
              return this.noButton?"calc(90vh - 80px)":"calc(90vh - 145px)"
            }else if(this.size=="tiny"){
              return "310px"
            }else if(this.size=="mini"){
              return this.noButton?"calc(70vh - 60px)":"calc(70vh - 120px)"
            }else if(this.size=="tinylong" || this.size=="small"){
              return this.noButton?"calc(80vh - 60px)":"calc(80vh - 120px)"
            }else if(this.size=="big" || this.size=="large"){
              return this.noButton?"calc(90vh - 80px)":"calc(90vh - 145px)"
            }else if(this.size=='huge'){
              return this.noButton?"calc(100vh - 110px)":"calc(100vh - 175px)"
            }
          }
        },
        data() {
            return {
              clientWidth: document.body.clientWidth
            };
        },
        created() {
        },
        methods: {
            handleClose(done) {
                this.$emit("update:visible", false)
            },
            onSubmit() {
                this.$emit("submit")
            }
        }
    };
</script>
<style lang="scss" scoped>
  .scroll-div{
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
